main {
  width: 700px;
  padding: 52px 29px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  border: solid 1px #fff;

}

div {
  box-sizing: border-box;
  border-radius: 8px;
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  border: #ccc solid 1px;
}

/*  background-color: 指定填充背景的颜色。 */
.background-box:nth-of-type(1) {
  background-color: #f6e58d;
}

/* background-image: 引用图片作为背景。 */
.background-box:nth-of-type(2) {
  background-image: url(./diu.png);
}



/* background-position: 指定元素背景图片的位置。 */
.background-box:nth-of-type(3) {
  background-image: url(./diu.png);
  background-position: 20px 20px;
  background-repeat: no-repeat;
}



/*    background-repeat: 决定是否重复背景图片。 */

.background-box:nth-of-type(4) {
  background-image: url(./diu.png);
  background-repeat: no-repeat;
}

/*     background-attachment: 决定背景图是否随页面滚动。 */
.background-box:nth-of-type(5) {
  background-image: url(./diu.png);
  /* background-attachment: scroll; */
  /* background-attachment: auto; */
  background-position: 100px 200px;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/*    background-clip  能够控制背景显示的位置 */

.background-box:nth-of-type(6) {
  background-color: #f6e58d;
  /* background-image: url(./fengjing.png); */
  background-position: 0% 0%;
  padding: 20px;
  background-repeat: no-repeat;
  background-clip: content-box;
}

/* background-origin  此属性需要与background-position配合使用。  */
.background-box:nth-of-type(7) {
  /* background-image: url(./fengjing.png); */
  background-color: #f6e58d;
  background-position: 30px 0;
  padding: 20px;
  background-repeat: no-repeat;

  background-origin: content-box;
}

/* background-size  用来调整背景图的大小 */

.background-box:nth-of-type(8) {
  /* background-image: url(./fengjing.png); */
  background-color: #f6e58d;
  padding: 20px;
  background-clip: content-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}